<template>
  <view class="employee-center">
    <!-- 个人信息头部 -->
    <view class="header">
      <view class="avatar-section">
        <image 
          class="avatar" 
          :src=" '/static/tabs/个人中心_sel.png'" 
        />
        <view class="info">
          <text class="name">{{ userInfo?.name || '' }}</text>
          <!-- <text class="position">{{ userInfo.position }}</text> -->
        </view>
      </view>
     
    </view>

    <!-- 工作信息 -->
    <view class="section">
      <view class="section-title">工作信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">员工编号</text>
          <text class="value">{{ userInfo?.businessmanId || ''}}</text>
        </view>
        <view class="info-item">
          <text class="label">部门</text>
          <text class="value">{{ userInfo?.department || ''}}</text>
        </view>
        <view class="info-item">
          <text class="label">负责区域</text>
          <!-- <text class="value">{{ formatDate(userInfo.hireDate) }}</text> -->
           <text class="value">{{ userInfo?.responsibleArea || ''}}</text>
        </view>
        <view class="info-item">
          <text class="label">联系电话</text>
          <text class="value">{{ userInfo?.phone || '' }}</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="section">
      <view class="section-title">待处理任务数量</view>
      <view class="menu-grid">
        <view class="menu-item" @click="goToPage('tasks')">
          <text>待检测设备:{{taskSize}}个</text>
        </view>
        <view class="menu-item" @click="goToPage('purchase')">
          <text>待跟进求购信息:{{PurchaseDemandSize}}个</text>
        </view>
        <!-- <view class="menu-item" @click="goToPage('leave')">
          <text>请假申请</text>
        </view>
        <view class="menu-item" @click="goToPage('overtime')">
          <text>加班申请</text>
        </view> -->
      </view>
    </view>

    <!-- 设置选项 -->
    <view class="section">
      <view class="section-title">设置</view>
      <view class="setting-list">
        <view class="setting-item" @click="goToPage('security')">
          <text>修改密码</text>
          <text class="arrow">▶</text>
        </view>
        <view class="setting-item" @click="handleLogout">
          <text>退出登录</text>
          <text class="arrow">▶</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import routerGuard from '../../utils/router-guard'
import { ref, reactive ,onMounted} from 'vue'
import { onLoad, onShow} from '@dcloudio/uni-app'
//导入stores
import { loginlofo } from '../../stores/loginlofo/loginlofo'
import { logintoken } from '../../stores/loginToken/loginToken'
import { useInspectionStore } from '../../stores/inspection/inspection'
const store = useInspectionStore()
//导入接口
import { selectBusinessId } from '../../services/PurchaseDemand'
//导入类型
import { Businessman } from '../../types/login'
// 定义响应式数据
const userInfo = ref<Businessman>()  //用户信息
const PurchaseDemandSize=ref<number>() //待跟进求购信息数量
const taskSize=ref<number>() //待检测设备数量
// 生命周期 
onLoad(async () => {
  //拿取用户信息
  const loginLofo = loginlofo()
  userInfo.value =loginLofo.userInfo
  console.log('用户消息', userInfo.value)
  //拿取待跟进求购信息数量
  const res=await selectBusinessId();
  PurchaseDemandSize.value=res.data.list.length
})
//
onMounted(async() => {
  await loadTasks()
  taskSize.value=store.equipments.length
})
const loadTasks = async () => {
  try {
    await store.initEquipments()
  } catch (err) {
    console.error('加载失败:', err)
    uni.showToast({ title: '加载失败', icon: 'error' })
  }
}
//
onShow(async () => {
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const path = '/' + currentPage.route
routerGuard.checkRoute(path)
})


/**
 * 跳转到指定页面
 * @param page 页面标识
 */
const goToPage = (page: string) => {
  switch (page) {
    case 'tasks':
      uni.switchTab({ url: '/pages/tasks/tasks' })
      break
    case 'purchase':
      uni.switchTab({ url: '/pages/purchase/purchase' })
      break
    case 'security':
      uni.navigateTo({ url: '/subpackages/security/security' })
      break
  }
}

/**
 * 退出登录
 */
const handleLogout = async() => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: async(res) => {
      if (res.confirm) {
        // 执行退出登录逻辑
      const loginToken = logintoken()
      await loginToken.clearToken()
      const loginLofo = loginlofo()
      await loginLofo.clearuserInfo()
        uni.redirectTo({
          url: '/pages/login/login'
        })
      }
    }
  })
}

/**
 * 格式化日期
 * @param date 日期字符串
 * @returns 格式化后的日期
 */
const formatDate = (date: string): string => {
  if (!date) return ''
  const d = new Date(date)
  return `${d.getFullYear()}年${String(d.getMonth() + 1).padStart(2, '0')}月${String(d.getDate()).padStart(2, '0')}日`
}
</script>

<style scoped>
.employee-center {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20rpx;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx 40rpx;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-section {
  display: flex;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  margin-right: 30rpx;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.position {
  font-size: 28rpx;
  opacity: 0.9;
}

.edit-btn {
  background: rgba(255, 255, 255, 0.2);
  padding: 15rpx 30rpx;
  border-radius: 50rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
}

.section {
  background: white;
  margin: 20rpx 20rpx 0;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  padding: 30rpx;
  font-size: 30rpx;
  font-weight: bold;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-list {
  padding: 0 30rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  color: #666;
  font-size: 28rpx;
}

.value {
  color: #333;
  font-size: 28rpx;
}

.menu-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.menu-item {
  width: 50%;
  text-align: center;
  padding: 40rpx 0;
  box-sizing: border-box;
  border-right: 1rpx solid #f0f0f0;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:nth-child(2n) {
  border-right: none;
}

.menu-item:nth-last-child(-n+2) {
  border-bottom: none;
}

.menu-item text {
  font-size: 26rpx;
  color: #333;
}

.setting-list {
  padding: 0 30rpx;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.arrow {
  color: #ccc;
  font-size: 32rpx;
}
</style>